import React from 'react';
import {
  Input,
  Select,
  Form,
  Button,
  Row,
  Col,
  DatePicker,
  InputNumber,
} from 'antd';
import CustomRangePicker from '../CustomRangePicker';
import Cascader from '../Cascader';
import LanchRange from '../LanchRange/index.jsx';
import CustomUpload from '../CustomUpload/index.jsx';
import CascadeDatePicker from '../CascadeDatePicker/index.jsx';
import RangeDatePicker from '../RangeDatePicker/index.jsx';

const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

class BaseForm extends React.Component {

  handleSubmit = () => {
    let submitObj = null;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { onSubmit } = this.props;
        submitObj = Object.assign({}, values);
        onSubmit && onSubmit(submitObj);
      }
      return null;
    });
    return submitObj;
  }

  getOptionList = (data, showField, submitField) => {
    let options = []
    data.map((item)=>{
      options.push(<Option value={item[submitField] || item.code} key={item[submitField] || item.code}>{item[showField] || item.name}</Option>)
      return true;
    })
    return options;
  }

  reset = () => {
    this.props.form.resetFields();
    if (this.CustomUpload) {
      this.CustomUpload.reset();
    }
  }

  initFormList = () => {
    const {
      getFieldDecorator
    } = this.props.form;
    const { formList, columns = 3, showOptBtn, formItemLayout={
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 18,
      },
    } } = this.props;
    const formItemList = [];
    const spanNum = 24/columns;
    const baseFormProps = {
      style: { margin: '0 auto' },
      ...formItemLayout
    };

    if (formList && formList.length > 0) {
      formList.forEach((item, i) => {
        const {
          label,
          field,
          initialValue='',
          type,
          list = [],
          rules = [],
          showField,
          submitField,
          ...rest,
        } = item;
        let temp = {
          ...formItemLayout
        }
        if (!label) {
          temp.labelCol = {
            span: 0
          };
          temp.wrapperCol = {
            span: 24
          };
        }
        const formProps = Object.assign({
          label,
        }, baseFormProps, temp);

        const strategy = {
          SELECT: (
            <Select
              {...rest}
            >
              {this.getOptionList(list, showField, submitField)}
            </Select>
          ),
          TEXTAREA: (
            <TextArea
              rows={3}
              {...rest}
            />
          ),
          INPUT: (
            <Input {...rest}/>
          ),
          INPUTNUMBER: (
            <InputNumber style={{width: '100%'}} {...rest}/>
          ),
          CUSTOMRANGEPICKER: (
            <CustomRangePicker style={{width: '100%'}} {...rest}/>
          ),
          CASCADER: (
            <Cascader {...rest}/>
          ),
          LANCHRANGE: (
            <LanchRange/>
          ),
          CUSTOMUPLOAD: (
            <CustomUpload ref={inst => {
              this.CustomUpload = inst;
            }} {...rest}/>
          ),
          DATEPICKER: (
            <DatePicker {...this.props} {...rest} style={{width: '100%'}} allowClear={false}/>
          ),
          CASCADEDATEPICKER: (
            <CascadeDatePicker {...this.props} {...rest} style={{width: '100%'}} allowClear={false}/>
          ),
          RANGEDATEPICKER: (
            <RangeDatePicker {...this.props} {...rest}></RangeDatePicker>
          ),
        };
        const component = strategy[type];

        if (component) {
          formItemList.push((
            <Col key={field} span={spanNum}>
              <FormItem {...formProps}>
                {
                  getFieldDecorator(field, {
                    initialValue,
                    rules,
                  })(component)
                }
              </FormItem>
            </Col>
          ));
        }
      })
    }

    if (formItemList.length % columns !== 0) {
      this.hasOptBtn = true;
      if (showOptBtn) {
        formItemList.push((
          <Col key={'opt'} span={spanNum}>
            <FormItem {...baseFormProps}>
              <Button type="primary" style={{ margin: '0 5px' }} onClick={this.handleSubmit}>查询</Button>
              <Button onClick={this.reset}>重置</Button>
            </FormItem>
          </Col>
        ));
      }
    }

    return formItemList;
  }

  render() {
    const { showOptBtn } = this.props;
    return (
      <Form>
        <Row gutter={24}>{this.initFormList()}</Row>
        { showOptBtn && !this.hasOptBtn ? (
          <FormItem style={{textAlign: 'right', marginBottom: 0}}>
            <Button type="primary" style={{ margin: '0 5px' }} onClick={this.handleSubmit}>查询</Button>
            <Button onClick={this.reset}>重置</Button>
          </FormItem>
        ) : null}
      </Form>
    );
  }
}

export default Form.create({})(BaseForm);
